@import "@{icon}";
@font-color: #48B2A5;

.zh-audio {
    height: 100%;
    .iconfont {
        color: @font-color;
    }

    // 独立的全功能
    .zh-audio-1 {
        height: 100%;
        font-size: 32rpx;

        display: flex;
        flex-direction: column;

        .audio-ctrl {
            height: 200rpx;

            display: flex;
            flex-direction: column;
        }
        .play-btn {
            height: 64rpx;
            width: 50rpx;

            display: flex;
            align-items: center;
            justify-content: center;
        }
        .icon-play {
            margin-left: 8rpx;
            font-size: 64rpx;
        }

        .icon-pause{
            font-size: 64rpx;
        }
        .ctrl-process {
            font-size: 20rpx;
            margin: 0 10rpx;

            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }

        .current-text {
            width: 60rpx;
        }

        .ctrl-process > slider {
            flex: 1;
        }

        .play-ctrl {
            flex: 1;

            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .play-ctrl > view {
            margin: 0 45rpx;
        }

        .play-speed {
            height: 64rpx;
            width: 64rpx;
            border: 1rpx solid;
            border-color: @font-color;
            border-radius: 50%;
            font-size: 20rpx;
            color: @font-color;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .play-prv, .play-next {
            font-size: 32rpx;
        }

        .play-btn-disable {
            opacity: .3;
        }

        .play-btn-hide {
            opacity: 0;
        }
    }
    // 悬浮样式
    .zh-audio-2 {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 99999;

        background-color: @font-color;
        border-radius: 60rpx;
        height: 84rpx;
        padding: 0 38rpx 0 14rpx;
        margin: 0 30rpx 24rpx 30rpx;
        font-size: 28rpx;
        /* width: 100%; */

        display: flex;
        flex-direction: row;
        align-content: center;
        align-items: center;

        .play-btn {
            height: 56rpx;
            width: 56rpx;
            border-radius: 50%;
            border: 4rpx solid;
            border-color: #FFFFFF;

            display: flex;
            align-items: center;
            justify-content: center;
        }
        .icon-play,
        .icon-pause {
            height: 22rpx;
            line-height: 22rpx;
        }
        .icon-play {
            margin-left: 7rpx;
            font-size: 22rpx;
            color: #FFFFFF;
        }

        .icon-pause{
            font-size: 22rpx;
            color: #FFFFFF;
        }

        .audio-content {
            flex: 1;
            margin: 0 40rpx;

            display: flex;
            flex-direction: column;
            // justify-content: space-between;
            // align-content: space-between;
            // align-items: flex-end;
        }

        .audio-tips {
            margin-top: -2rpx;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-content: center;

            color: #ffffff;
        }

        .audio-title {
            width: 300rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
        }

        .audio-time {
            // width: 180rpx;
            font-size: 20rpx;
            color: #ffffff;
            opacity: 0.6;
            white-space: nowrap;
            word-wrap: normal;
        }

        .audio-btn {
            font-size: 30rpx;
            color: #ffffff;
            opacity: 0.4;
        }
    }

    .zh-audio-up {
        bottom: 130rpx;
    }
}

// @import 'zh-audio-1.less';
// @import 'zh-audio-2.less';
